<template>
	<view class="room_state">

		<template>
			<view class="lease_header">
				<u-subsection :list="leaseOption()" mode="subsection" :current="current"
					@change="changeCurrent"></u-subsection>
				<view class="warning">
					<u--text text="刷新房源，可以让房源排名更靠前!" :bold="true"color="#d50000"></u--text>
					<u-button color="#00aa00" text="一键刷新"size="large"  class="custom-style"
						@click="getFlushed()"></u-button>
				</view>
			</view>
			<view class="house_box">
				<template v-if="myhouseList.length != 0">
					<view class="house_manage" v-for="(item, index) of myhouseList" :key="index">
						<u--text prefixIcon="home" :bold="true" iconStyle="font-size: 20px" size="36rpx"
							:text="item.communityName"></u--text>
						<view class="house_item">
							<view v-for="(houseChildern, houseIndex) of item.ventricleList" :key="houseIndex">
								<view class="total_actiive">
									<u-checkbox-group>
										<u-checkbox @change="changeActiveList($event, index, houseIndex)" shape="circle"
											:checked="scopeAllCheckedList[index][houseIndex]"
											:customStyle="{marginBottom: '8px'}" label="全选">
										</u-checkbox>
									</u-checkbox-group>
								</view>
								<view class="house_detail"
									:style="{backgroundColor: activeHouse[index][houseIndex][houseindex] ? '#e0f0f8' : '',border: activeHouse[index][houseIndex][houseindex] ? '1rpx solid #5da3ff' : ''}"
									v-for="(houseitem, houseindex) of houseChildern.list" :key="houseindex"
									@click="checkedHouse(index,houseIndex,houseindex)">
									<!-- {{houseChildern.list.length}} -->
									<!-- <view class="house_name">
										{{ houseitem.communityName }}
									</view> -->
									<view class="house_room">
										{{houseitem.buildingNumber}}幢/栋{{houseitem.unitNumber}}单元{{houseitem.ventricleNumber}}室{{houseitem.roomNumber}}号房间
									</view>
									<view class="house_money">
										￥{{ houseitem.rental || '暂无' }}
									</view>
									<view class="rentState" v-if="houseitem.rentState == 1">
										已租
									</view>
									<view class="rentState1" v-if="houseitem.rentState == 0">
										未租
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else style="height: 100vh; ">
					<u-empty text="没有此类房源哦~" icon="../../../static/default/default.png"
						style="margin-top: 50%; transform: translateY(50%);">
					</u-empty>
				</template>
			</view>
			<view class="operate_box">
				<u-button text="设为未租" color="#4fcb98" round="10" :customStyle="buttonStyle" @click="putSatateMethod"
					v-if="current == 1"></u-button>
				<u-button text="设为已经租" color="#4d89cb" :customStyle="buttonStyle" @click="putSatateMethod"
					v-else></u-button>
			</view>
		</template>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getAvailability,
		putHouseLeaseSatate,
		getHouseTotal
	} from "@/api/house/index.js";
	import {
		getRefresh
	} from '@/api/home/index.js';
	export default {
		data() {
			return {
				scopeAllCheckedList: [],
				activeHouse: [],
				myhouseList: [],
				unLeased: 0,
				leased: 0,
				quantity: "3",
				// leaseOption: [
				// 	`未出租(${this.unLeased}间)`,
				// 	`已出租(${this.leased}间)`,
				// ],
				current: 0,
				buttonStyle: {
					borderRadius: "10rpx",
				}
			}
		},
		mounted() {

		},
		computed() {


		},
		created() {
			this.getAllHouseInfo();
			this.getHouseTotalMethod()
		},
		methods: {
			leaseOption() {

				return [`未出租(${this.unLeased || 0}间)`, `已出租(${this.leased || 0}间)`]
			},
			async getHouseTotalMethod() {
				const res = await getHouseTotal();

				if (res.data.code != 200) return this.$refs.uToast.show({
					message: res.data.msg,
					type: 'error'
				})

				this.leased = res.data.data.leasedRooms
				this.unLeased = res.data.data.notLetRooms //全部房源量
				// this.quantity = res.data.data.totalRooms

			},

			async putSatateMethod() {
				// putSatateMethod() {
				var idList = []
				this.myhouseList.map((item, index) => {

					item.ventricleList.map((houseItem, houseIndex) => {
						houseItem.list.map((houseChildrenItem, houseChildrenIndex) => {
							if (this.activeHouse[index][houseIndex][houseChildrenIndex]) {
								idList.push(houseChildrenItem.id)
							}
						})
					})
				})
				if (idList.length == 0) return this.$refs.uToast.show({
					message: '您还没有选择哦~~',
					type: 'error'
				})
				const res = await putHouseLeaseSatate(idList.toString());

				if (res.data.code != 200) return this.$refs.uToast.show({
					message: res.data.msg,
					type: 'error'
				})
				this.getAllHouseInfo();
				this.activeHouse = [];
				this.scopeAllCheckedList = [];
				this.createActiveList();
				this.getHouseTotalMethod()
				this.$refs.uToast.show({
					message: '设置成功',
					type: 'success'
				})
			},


			changeActiveList(bool, index, houseIndex) {
				this.activeHouse[index][houseIndex].map((item, childremIndex) => {
					this.$set(this.activeHouse[index][houseIndex], childremIndex, bool)
				})
				this.scopeAllCheckedList[index][houseIndex] = bool;
			},

			checkedHouse(index, houseIndex, houseindex) {

				this.$set(this.activeHouse[index][houseIndex], houseindex, !this.activeHouse[index][houseIndex][
					houseindex
				])
				var state = this.activeHouse[index][houseIndex].every(item => item == true);
				if (state) {
					this.$set(this.scopeAllCheckedList[index], houseIndex, true)
				} else {
					this.$set(this.scopeAllCheckedList[index], houseIndex, false)
				}
			},
			async getAllHouseInfo() {
				const res = await getAvailability("", this.current, "")
				if (res.data.code != 200) return this.$refs.uToast.show({
					message: res.data.msg,
					type: 'error'
				})
				this.myhouseList = res.data.data;

				// this.quantity = res.data.data.totalRooms
				this.createActiveList()
			},
			changeCurrent(index) {
				this.current = index;
				this.getAllHouseInfo();
			},
			createActiveList() {
				this.activeHouse = [];
				this.scopeAllCheckedList = []
				if (this.myhouseList.length != 0) {
					this.myhouseList.map((item, index) => {
						this.activeHouse.push([]);
						this.scopeAllCheckedList.push([]);

						item.ventricleList.map((houseItem, houseIndex) => {
							this.activeHouse[index].push([]);
							this.scopeAllCheckedList[index].push(false)
							houseItem.list.map((houseItemList, houseIndexList) => {
								this.activeHouse[index][houseIndex].push(false)
							})

						})
					})
				}

			},
			//刷新房源
			async getFlushed() {
				const res = await getRefresh()
				if (res.data.code == 200) {
					this.$refs.uToast.show({
						message: '刷新成功',
						type: 'success'
					})
				} else {
					this.$refs.uToast.show({
						message: '刷新失败',
						type: 'error'
					})
				}
			},
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	@import "@/styles/global.scss";
	@import "@/styles/index.scss";


	.room_state {
		@include cover;
		@include boxSing;
		background-color: $pagebgc;
		min-height: 100vh;
		max-height: 100%;

		.lease_header {
			width: 100%;
			position: fixed;
			margin-bottom: auto;
			background-color: #fff;
			z-index: 99;
			@include boxshadow;
		}

		.warning {
			display: flex;
			align-items: center;
			width: 100%;
			background-color: #fff;
			padding: 10rpx 20rpx;
			box-sizing: border-box;

			.custom-style {
				width: 20%;
				height: 60rpx;
			}
		}

		.house_box {
			margin-top: 150rpx;
			padding-bottom: 120rpx;

			.house_manage {
				padding: 10rpx;
				box-sizing: border-box;
				width: 100%;
				background-color: #fff;

				.house_title {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					background-color: #fff;
					margin-top: 30rpx;
					position: relative;

					.name {
						display: inline-block;
						font-size: 34rpx;
						padding: 10rpx 0;
						color: #4a4a4a;
						margin-left: 15rpx;
						font-weight: bold;
					}
				}

				.house_item {
					width: 100%;
					background-color: #fff;
					padding: 20rpx 0 30rpx 0;
					box-sizing: border-box;

					.total_actiive {
						display: flex;
						justify-content: flex-end;
						align-items: center;
					}

					.house_detail {
						text-align: center;
						line-height: 2;
						position: relative;
						display: inline-block;
						margin-left: 2.5%;
						width: 46%;
						background-color: #f4f4f4;
						// background-color: #e0f0f8;
						border: 1rpx solid #e1e1e1;
						margin-top: 30rpx;
						// padding-left: 20rpx;
						box-sizing: border-box;
						height: 200rpx;
						// line-height: 2;
						overflow: hidden;
						border-radius: 10rpx;
						padding: 10rpx;
						@include boxshadow;

						.rentState {
							position: absolute;
							bottom: 0;
							right: 0;
							background-color: #c6c6c6;
							color: #fff;
							border: 1rpx solid #e1e1e1;
							padding: 5rpx 10rpx;
							border-radius: 10rpx;
							font-size: 25rpx;
						}

						.rentState1 {
							position: absolute;
							bottom: 0;
							right: 0;
							background-color: #4d89cb;
							color: #fff;
							border: 1rpx solid #e1e1e1;
							padding: 5rpx 10rpx;
							border-radius: 10rpx;
							font-size: 25rpx;
						}

						.house_name {
							font-size: 25rpx;
							color: #000;
							font-weight: bold;

						}

						.house_room {
							color: #000;
							margin-top: 6rpx;
							font-size: 30rpx;
						}

						.house_money {
							color: red;
							margin-top: 6rpx;
							font-size: 32rpx;
							font-weight: bold;
						}
					}
				}
			}
		}

		.operate_box {
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			position: fixed;
			bottom: 10rpx;
			padding: 20rpx 3%;
			// display: flex;
			// gap: 5%;
			box-sizing: border-box;
			overflow: hidden;
			box-shadow: 3rpx 3rpx 0rpx 3rpx #aaaaaa;

			.set_lease {
				flex: 1;
				height: 100%;
			}

			.set_rented {
				flex: 1;
				height: 100%;

			}
		}
	}
</style>